<template>
  <div class="app-container">
    <!-- 家属减少页面 -->
    <!-- 顶部按钮部分 -->
    <div class="top_btn_box">
      <div>
        <el-button size="small" type="primary" @click="openChoosePerson"
          >新增</el-button
        >
        <el-button
          size="small"
          type="success"
          v-show="hasData"
          @click="savePerson"
          >保存</el-button
        >
      </div>
      <div v-show="hasData">
        <el-button size="small" type="danger" @click="deleteRow"
          >删除</el-button
        >
        <el-button
          size="small"
          type="primary"
          style="margin-right: 10px"
          @click="submitForReview"
          >提交审核</el-button
        >
        <helpBtn :helpId="3005" />
      </div>
    </div>

    <!-- flex布局 -->
    <div class="concent" v-show="hasData">
      <div class="input_box">
        <!-- 公共录入组件 -->
        <inputCommon
          ref="inputCommon"
          module="familyReduce"
          :tableId="tableId"
          v-loading="loading"
        ></inputCommon>
      </div>
      <div style="width: 480px">
        <personList
          ref="personList"
          :tableId="tableId"
          :choosePerson="changeWorker"
        />
      </div>
    </div>

    <!-- 选择个人信息弹窗 -->
    <ChoosePerson
      :visible="choosePerson.visible"
      :type="'2'"
      :typeId="'2'"
      :tableId="tableId"
      :remoteClose="remoteClose"
    />
  </div>
</template>
<script>
import api from "@/api/test";
import ChoosePerson from "@/views/personnelInfo/workerReduce/components/choosePerson.vue";
import inputCommon from "@/views/system/common/input";
import personList from "@/views/personnelInfo/workerReduce/components/personList.vue";
import helpBtn from "@/components/HelpBtn";

export default {
  name: "FamilyReduce",
  components: {
    ChoosePerson,
    inputCommon,
    personList,
    helpBtn,
  },
  data() {
    return {
      // 选择人员
      choosePerson: {
        visible: false,
      },
      // 当前编辑的表单ID
      tableId: "42",
      hasData: false,
      loading: false,
      newFormData: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 抓取数据判断是否有未提交数据
    async getData() {
      const params = {
        tableId: this.tableId,
      };
      const res = await api.queryBody(
        "/admin/api/bfmc/BasicInformationModificationController/rightDataList",
        params
      );
      if (res.code == 1) {
        console.log(res.data);
        if (res.data.length == 0) {
          console.log("没有数据");
          this.$refs.inputCommon.formData = {};
          this.$refs.personList.tableData = [];
          this.hasData = false;
        } else {
          console.log("有数据");
          this.hasData = true;
          this.$refs.personList.tableData = res.data;
          this.$refs.inputCommon.formData = res.data[0];
          this.$refs.personList.highlight(res.data[0]);
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    // 选择新的人员
    async getInputAndList(data) {
      console.log(data);
      this.hasData = true;
      this.choosePerson.visible = false;
      for (let key in data) {
        if (key != "obj") {
          this.newFormData[key] = data[key];
        }
      }
      this.newFormData.byv001 = data.obj.byv001;
      this.newFormData.aae144 = data.obj.aae144;
      this.newFormData.aac002 = data.obj.aac002;
      this.newFormData.aac003 = data.obj.aac003;
      this.newFormData.aae163 = data.obj.aae163;
      this.newFormData.aae032 = "";
      this.newFormData.aab001 = data.obj.aab001;
      this.newFormData.aac001 = data.obj.aac001;
      this.newFormData.pcc001 = data.obj.pcc001;
      this.$refs.inputCommon.formData = this.newFormData;
    },
    // 打开人员选择窗口
    openChoosePerson() {
      this.choosePerson.visible = true;
    },
    // 关闭选择窗口
    remoteClose() {
      this.choosePerson.visible = false;
    },
    // 保存数据
    async savePerson() {
      //   console.log(this.form);
      this.$refs.inputCommon.$refs.form.validate(async (valid) => {
        if (valid) {
          console.log('验证通过');
          const params = {
            tableId: this.tableId,
            mapdata: this.$refs.inputCommon.formData,
          };
          const res = await api.postBody(
            "/admin/api/bfmc/BasicInformationModificationController/dataChangeEntrySaveLess",
            params
          );
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$refs.personList.loading = true;
            // 更新右侧数据
            this.$refs.personList.tableData = res.data;
            this.$refs.personList.selectAll();
            setTimeout(() => {
              this.$refs.personList.loading = false;
            }, 500);
          } else {
            this.$message.error(res.msg);
          }
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    // 点击右侧数据渲染左侧表单
    changeWorker(row) {
      console.log(row);
      this.loading = true;
      this.$refs.inputCommon.formData = row;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    // 删除右侧选中行
    deleteRow() {
      this.$refs.personList.deleteRows();
    },
    // 提交审核
    async submitForReview() {
      this.$refs.personList.submitRow("reduceFamilyMembers");
    },
  },
};
</script>
<style lang="scss" scoped>
.top_btn_box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.concent {
  display: flex;
  justify-content: space-between;
  .input_box {
    height: 500px;
    overflow: auto;
  }
}
</style>